<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<html>
<head>
	<title>上海霁圣电子 登录</title>
	<meta name="decorator" content="blank"/>
	
	<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap=v3.3.0/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/exhibition/exhibition_head.css" />
	
    <script src="${ctxStatic}/bootstrap=v3.3.0/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<style type="text/css">
      html,body,table{background-color:#f5f5f5;width:100%;text-align:center;}.form-signin-heading{font-family:Helvetica, Georgia, Arial, sans-serif, 黑体;font-size:36px;margin-bottom:20px;color:#0663a2;}
      /* .container {
	    width: 1170px !important;
	  } */
      .form-signin{position:relative;text-align:left;width:360px;padding:25px 29px 29px;margin:0 auto 20px;background-color:#fff;border:1px solid #e5e5e5;
        	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05);}
      .form-signin .checkbox{margin-bottom:10px;color:#0663a2;} .form-signin .input-label{font-size:16px;line-height:23px;color:#999;}
      .form-signin .input-block-level{font-size:16px;height:auto;margin-bottom:15px;padding:7px;*width:283px;*padding-bottom:0;_padding:7px 7px 9px 7px;}
      .form-signin .btn.btn-large{font-size:16px;} .form-signin #themeSwitch{position:absolute;right:15px;bottom:10px;}
      .form-signin div.validateCode {padding-bottom:15px;} .mid{vertical-align:middle;}
      .header{height:80px;padding-top:20px;} .alert{position:relative;width:300px;margin:0 auto;*padding-bottom:0px;}
      label.error{background:none;width:270px;font-weight:normal;color:inherit;margin:0;}
      .alert .close {
		 position: absolute;
		 top: 0px;
		 right: 0px;
		 line-height: 20px;
	  }
      #loginForm .error{
      	color:red;
      }
      @media (min-width: 1200px){
	      .container {
			    width: 1170px !important;
			}
	  }
		footer {
			width: 100%;
			height: 140px;
			color: #fff;
			position:fixed;
			left:0px;
			bottom:0px;
			background-color: #000;
			display: -webkit-box;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		
		@media all and (max-width: 768px) {
			footer {
				height: 80px;
			}
		}
    </style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#loginForm").validate({
				submitHandler: function(form) {
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					error.appendTo($("#loginError").parent());
					if (element.is("#username") || element.is("#password")){
						/* error.appendTo($("#loginError2").parent());
						$("#loginError2").parent().parent().removeClass("hide"); */
						$( element ).closest( "form" ).find($('#' +element.attr( "id" ) ) ).after( error );
					} 
				},
				errorElement: "p",
				rules: {
					validateCode: {
						remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"
					},
					username: {
						required: true,
					},
					password: {
						required: true,
					}
				},
				messages: {
					username: {
						required: "请填写用户名"
					},
					password: {
						required: "请填写密码"
					},
					validateCode: {
						remote: "验证码不正确",
						required: "请填写验证码"
					}
				}
			});
		});
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>
</head>
<body>
    <!-- now  head -->
    <div class="navbar-wrapper">
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header page-scroll nav_h col-md-3">
					<a href="${ctx}/index-1${fns:getUrlSuffix()}">
						<img src="${ctxStatic}/IDH/images/JS-LOGO.png" />
					</a>
					<div class=" pull-right lang visible-xs-block">
						<div class="pull-left">
							 <c:forEach items="${fnc:getSiteList()}" var="site">
								 <a href="#" onclick="location='${ctx}/index-${site.id}${urlSuffix}'">${site.title}</a>
							 </c:forEach>
						</div>
						<div class="pull-right">
							<button class="btn btn-primary"><a href="${ctx}/front/index"><img src="${ctxStatic}/IDH/images/eihidition/shop-icon.png">商城</a></button>
						</div>
					</div>
				</div>
				<div id="navbar" class="col-md-9 col-xs-12">
					<ul id="main_nav" class="nav-head col-md-8">
						<c:forEach items="${fnc:getMainNavList(site.id)}" var="category" varStatus="status">
							<c:if test="${status.index lt 5}">
				                   <c:set var="menuCategoryId" value=",${category.id},"/>
					    		<li class="${requestScope.category.id eq category.id||fn:indexOf(requestScope.category.parentIds,menuCategoryId) ge 1?'active':''}"><a href="${category.url}" target="${category.target}"><span>${category.name}</span></a></li>
					    	</c:if>
				    	</c:forEach>
					    <li id="siteSwitch" class="dropdown hide">
					       	<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="站点"><i class="icon-retweet"></i></a>
							<ul class="dropdown-menu">
							  <c:forEach items="${fnc:getSiteList()}" var="site"><li><a href="#" onclick="location='${ctx}/index-${site.id}${urlSuffix}'">${site.title}</a></li></c:forEach>
							</ul>
						</li>
				    	<li id="themeSwitch" class="dropdown hide">
					       	<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="主题切换"><i class="icon-th-large"></i></a>
						    <ul class="dropdown-menu">
						      <c:forEach items="${fns:getDictList('theme')}" var="dict"><li><a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.value}.html?url='+location.href">${dict.label}</a></li></c:forEach>
						    </ul>
						    <!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
					    </li>
		           </ul>
		           <div class="col-md-4 text-right lang hidden-xs">
						<div class="col-md-12">
							 <c:forEach items="${fnc:getSiteList()}" var="site">
								 <a href="#" class="switcha" onclick="location='${ctx}/index-${site.id}.html'">${site.title}</a>
							 </c:forEach>
						</div>
						<div class="col-md-12">
							<a class="btn btn-primary" href="/jeesite/f/front/index"><img src="${ctxStatic}/IDH/images/eihidition/shop-icon.png">商城</a>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<!--[if lte IE 6]><br/><div class='alert alert-block' style="text-align:left;padding-bottom:10px;"><a class="close" data-dismiss="alert">x</a><h4>温馨提示：</h4><p>你使用的浏览器版本过低。为了获得更好的浏览体验，我们强烈建议您 <a href="http://browsehappy.com" target="_blank">升级</a> 到最新版本的IE浏览器，或者使用较新版本的 Chrome、Firefox、Safari 等。</p></div><![endif]-->
	<div class="header">
		<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}"><button data-dismiss="alert" class="close">×</button>
			<label id="loginError" class="error">${message}</label>
		</div>
	</div>
<%-- 	<div class="header hide" style="position: absolute;left: 50%;margin-left: -150px;top: 100px">
		<div id="messageBox2" class="alert alert-error "><button data-dismiss="alert" class="close">×</button>
			<label id="loginError2" class="error">${message}</label>
		</div>
	</div> --%>
	<h1 class="form-signin-heading">上海霁圣电子后台管理</h1>
	<form id="loginForm" class="form-signin" action="${ctx}/login" method="post">
		<label class="input-label" for="username">登录名 </label>
		<input type="text" id="username" name="username" class="input-block-level required" required value="${username}">
		<label class="input-label" for="password">密码</label>
		<input type="password" id="password" name="password" class="input-block-level required" required autocomplete="off">
		<c:if test="${isValidateCodeLogin}"><div class="validateCode">
			<label class="input-label mid" for="validateCode">验证码</label>
			<sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;"/>
		</div></c:if><%--
		<label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
		<input class="btn btn-large btn-primary" type="submit" value="登 录"/>&nbsp;&nbsp;
		<label for="rememberMe" title="下次不需要再登录"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住我（公共场所慎用）</label>
		
	</form>
	<div class="footer">
		
	</div>
	<footer>
	   <p class="text-center">©2016 <a href="#">上海霁圣电子科技有限公司</a>   <a href="#" target="_blank">沪ICP备16053480号-1</a></p>
	</footer>
	<script src="${ctxStatic}/flash/zoom.min.js" type="text/javascript"></script>
</body>
</html>